<template>
  <div class="container" style="height: 100%">
    <div class="head-top">
      <span>添加新资产</span>
      <img @click="$router.push({name:'Index'})" src="static/img/return.png" />
    </div>
    <div style="max-height: 93%;overflow-y: scroll;">
      <div class="coin">
        <div class="coin-left">
          <img src="static/img/ETH2.png" alt />
          <div>
            <span class="name">ETH</span>
            <span>ethereum</span>
            <span>0x0000...00000000</span>
          </div>
        </div>
        <div class="switch">
          <!--<mt-switch v-model="value"></mt-switch>-->
        </div>
      </div>

      <div v-for="coin,index in coinsList" class="coin">
        <div class="coin-left">
          <img :src="coin.img" alt />
          <div>
            <span class="name">{{coin.name}}</span>
            <span>{{coin.fullName}}</span>
            <span>{{coin.contractaddress.substring(0,20)}}...</span>
            <!--<span>{{coin.contractaddress}}</span>-->
          </div>
        </div>
        <div class="switch">
          <van-switch v-model="coin.open" size="20px" active-color="#1C31DC" inactive-color="#E9E6FF" :id="coin.id" @change="onSwitch(coin,index)" />
          <!-- <mt-switch v-model="coin.open" size="20px" active-color="#1C31DC" inactive-color="#E9E6FF" :id="coin.id" @change="onSwitch(coin,index)"></mt-switch> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { Switch } from "mint-ui";

export default {
  components: {
    Switch,
  },
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["coinsList"]),
  },
  methods: {
    ...mapActions(["setCoinByIndex"]),
    onSwitch(coin, index) {
      this.setCoinByIndex(coin, index);
    },
  },
  watch: {
    coinsList(oldval, newval) {},
  },
  async mounted() {
    console.log(this.coinsList);
  },
};
</script>
<style lang="less" scoped>
#app {
  overflow: scroll;
}
.head-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  box-shadow: 0px 1px 0.75rem 0.1875rem rgba(165, 172, 232, 0.26);

  div {
    position: absolute;
    right: 1.5625rem;
    font-size: 30px;
  }

  span {
    font-size: 18px;
    color: #323232;
  }

  img {
    width: 0.6875rem;
    height: auto;
    position: absolute;
    left: 1.5625rem;
    top: 50%;
    transform: translateY(-50%);
  }
}
.container {
  width: 100%;
}
.coin {
  margin: .625rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 2px rgba(6, 1, 50, 0.04);
  border-radius: .1875rem;
  display: flex;
  justify-content: space-between;
  padding: .625rem 1rem .8125rem .625rem;
  .coin-left {
    display: flex;
    img {
      width: 1.625rem;
      height: 1.625rem;
      margin-right: .625rem;
    }
    span {
      display: block;
      font-size: 13px;
      color: #888;
      &.name {
        font-size: 17px;
        font-weight: bold;
        color: #323232;
      }
    }
  }
}
.switch {
  margin-top: .9375rem;
}
</style>

